<template>
	<div class="songlist">
		<el-table
			:data="musicArr"
			style="width: 100%"
			:row-class-name="tableRowClassName"
			@row-dblclick="playSong"
			@row-contextmenu="contextmenu"
		>
			<!-- <el-table-column type="index" width="50">
				这个貌似是播放，记住播放一定要显示，有时间就做
				<template #default="scope, index">
					<IconPark v-if="scope.row.id === song.id" :icon="VolumeSmall" theme="filled" />
					<span v-else>{{ scope.row.index }}</span>
				</template>
			</el-table-column> -->
			<el-table-column label="收藏" width="60">
				<template #default="scope">
					<IconPark class="icon-like" 
					:class="songLikes.indexOf(scope.row.id) !== -1 ? 'like' : ''" 
					:icon="Like" 
					:theme="songLikes.indexOf(scope.row.id) !== -1 ? 'filled' : 'outline'" 
					@click="clickLike(scope.row.id)" 
					style="cursor: pointer;"
					size="16" />
				</template>
			</el-table-column>
			<el-table-column label="音乐名" min-width="300">
  				<template #default="scope">
    				<p style="cursor: pointer" @click="navigateToSongDetail(scope.row.id)">{{ getSongTitle(scope.row.name) }}</p>
  				</template>
			</el-table-column>
			<el-table-column v-if="showArName" prop="" label="歌手" min-width="160">
				<template #default="scope">
					{{ getSingerName(scope.row.name) }}
				</template>
			</el-table-column>
			<el-table-column prop="source" label="来源" min-width="200">
				<template #default="scope">
					{{ scope.row.source }}
					<!-- <span class="clickable" @click="toAlbumDetails(scope.row.al.id)">{{ scope.row.al.name }}</span> -->
				</template>
			</el-table-column>
			<el-table-column prop="duration" label="时长" min-width="80">
				<template #default="scope">
					<span>{{ useFormatDuring(scope.row.duration) }}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup lang="ts">
import IconPark from '@/components/common/IconPark.vue';
import { Like } from '@icon-park/vue-next';
import { useFormatDuring } from '@/utils/format';
import { useSongStore } from '@/store/song';
import { useUserStore } from '@/store/user';
const {  MusicList } = useUserStore();
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';


const props = defineProps<{
	musicArr?: [] ;
	showArName: boolean;
	//showLike: boolean;
	//like?: () => void;
}>();

const router = useRouter();
//const isLogin: boolean = Boolean(localStorage.getItem('cookie'));
//const { song } = storeToRefs(useSongStore());一个音乐的详细信息，这里需要修改
const { songId } = storeToRefs(useSongStore());
const { songLikes } = storeToRefs(useUserStore());
const { play, addPlayList, getSongTitle, getSingerName } = useSongStore();
const navigateToSongDetail = (id:number) => {
      router.push({ name: '歌曲详情', params: { id } });
}
const playSong = (row: any) => {
	play(row.id);
	if (props.musicArr) {
		addPlayList(true, ...props.musicArr);
	}
};

function clickLike(id:number) {
	MusicList(1, id)
}

function tableRowClassName({ row, rowIndex }: { row: any; rowIndex: number }) {
	if (row.id == songId) {
		return 'active';
	}
}

// function toSingerDetails(id: number) {
// 	if (id) {
// 		router.push({
// 			name: 'artistDetail',
// 			query: { id: id },
// 		});
// 	} else {
// 		ElMessage.error('无相关艺人');
// 	}
// }
// function toAlbumDetails(id: number) {
// 	router.push({
// 		name: 'albumDetail',
// 		query: { id: id },
// 	});
// }

// 右键点击事件
function contextmenu(row, column, event) {
	// location.assign('http://121.40.174.152/music')
	// console.log(row);
	// console.log(column);
	// console.log(event);
	// event.preventDefault()
}
</script>

<style lang="scss" scoped>
.songlist {
	.title {
		display: flex;
		align-items: flex-end;
		border-bottom: 3px solid #34d399;
		h3 {
			font-size: 22px;
			margin-right: 10px;
		}
	}
	.like {
		color: red;
	}
	:deep(.cell) {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}
</style>